<template>
  <div class="flex gap-3 mt-6 pt-5 border-t border-gray-200">
    <button
      :disabled="saving"
      @click="$emit('save')"
      class="px-5 py-2.5 border-none rounded text-sm cursor-pointer transition-all bg-green-500 text-white hover:bg-green-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
    >
      {{ saving ? '保存中...' : '保存' }}
    </button>
    <button
      @click="$emit('toggle-preview')"
      class="px-5 py-2.5 border-none rounded text-sm cursor-pointer transition-all bg-blue-500 text-white hover:bg-blue-600"
    >
      {{ showPreview ? '编辑' : '预览' }}
    </button>
    <button
      :disabled="exporting"
      @click="$emit('export-pdf')"
      class="px-5 py-2.5 border-none rounded text-sm cursor-pointer transition-all bg-purple-500 text-white hover:bg-purple-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
    >
      {{ exporting ? '导出中...' : '导出PDF' }}
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  saving: boolean
  exporting: boolean
  showPreview: boolean
}

defineProps<Props>()

defineEmits<{
  save: []
  'toggle-preview': []
  'export-pdf': []
}>()
</script>
